<template>
	<view class="regist">
		<view class="regist-c">
			<view class="head">
				<image @click="upload" :src="info.avatar" mode="widthFix"></image>
			</view>
			<view class="iptBox">
				<view class="all">
					<text>姓名：</text>
					<wInput
						class="ipt"
					    v-model="info.username"       
					    type="text"                       
					    placeholder="请输入姓名" 
					></wInput>
				</view>
				
				<view class="all">
					<text>昵称：</text>
					<wInput
					class="ipt"
					    v-model="info.nickname"       
					    type="text"    
						maxlength="11"
					    placeholder="请输入昵称" 
					></wInput>
				</view>
				<view class="all">
					<text>密码：</text>
					<wInput
					class="ipt"
					    v-model="info.password"       
					    type="password"              
						isShowPass = true
					    placeholder="请输入密码" 
					></wInput>
				</view>
				<view class="all">
					<text>手机号：</text>
					<wInput
					class="ipt"
					    v-model="info.tel"       
					    type="text"              
					    maxlength="11"            
					    placeholder="请输入手机号" 
					></wInput>
				</view>
				
				<view class="all">
					<text>邮箱：</text>
					<wInput
					class="ipt"
					    v-model="info.email"       
					    type="text"                      
					    placeholder="请输入邮箱" 
					></wInput>
				</view>
			</view>
			
			<view class="code">
				<button v-if="!isChange" @click="push" class="btn" type="default">提交</button>
				<button v-else @click="edit" class="btn" type="default">修改</button>
				
				<view class="detail">
					完成注册即代表你同意
					<text>用户协议</text>和
					<text>隐私政策</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wInput from '@/components/watch-login/watch-input.vue'  
	import {regist,update} from "../../../../utils/user/index.js"
	export default {
		data() {
			return {
				isChange: false,
				info:{
					username:'',
					nickname:'',
					password: "",
					tel:"",
					email:"",
					avatar: "../../../../static/icons/logo.png"
				}
			};
		},
		onLoad(e) {
			if(e.type == "change"){
				this.isChange = true
				var item = uni.getStorageSync("user")
				// console.log(item)
				this.info.username = item.username
				this.info.nickname = item.nickname
				this.info.tel = item.tel
				this.info.email = item.email
				this.info.id = item.id
				if(!item.avatar){
					this.info.avatar = this.info.avatar
					// console.log(1)
				}else{
					this.info.avatar = item.avatar
				}
			}
		},
		 components:{
			wInput,  //input
		},
		methods:{
			push(){
				regist(this.info)
				.then(res=>{
					// console.log(res)
					if(res.data.code == "S"){
						uni.showToast({
						    title: '注册成功！',
						    duration: 2000,
							icon:'none'
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:"../../login/login"
							})
						},2000)
						
					}
				})
			},
			//修改个人信息
			edit(){
				update(this.info)
				.then(res=>{
					// console.log(res)
					// uni.setStorageSync("user",)
					if(res.data.code == "S"){
						var item = uni.getStorageSync("user")
						item.avatar = this.info.avatar
						item.username = this.info.username
						item.nickname = this.info.nickname
						item.tel = this.info.tel
						item.password2 = this.info.password
						item.email = this.info.email
						uni.setStorageSync("user",item)
						uni.showToast({
						    title: '修改成功！',
						    duration: 2000,
							icon:'none'
						});
						setTimeout(()=>{
							uni.switchTab({
								url:"../../user"
							})
						},2000)
					}
				})
			},
			upload(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: 'http://bufantec.com/api/leju/admin/material/uploadAndSaveImg', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
				                // console.log();
								this.info.avatar = JSON.parse(uploadFileRes.data).ossUrl
				            }
				        });
				    }
				});
			}
		}
	}
</script>

<style>
page{
	/*  #ifdef APP-PLUS || MP-WEIXIN */
	height: 100%;
	background-color: #F1ECE7;
	/*  #endif  */
}
</style>
<style lang="scss" scoped>
body,html,uni-page-body {
	height: 100%!important;
	background-color: #F1ECE7;
}
.regist{
	width: 100%;
	height: 100%;
	overflow: scroll;
	background-color: #F1ECE7;
	.head{
		margin: 0 auto ;
		text-align: center;
		image{
			width: 212rpx;
			height: 212rpx!important;
			border-radius: 50%;
			object-fit: contain;
		}
	}
	.regist-c{
		width: calc(100% - 70rpx);
		margin: 50rpx auto 0;
		// overflow: hidden;
	
		.iptBox{
			margin: 0 0 48rpx;
			// height: 78rpx;
			.all{
				display: flex;
				align-items: center;
				text{
					width: 160rpx;
					text-align: right;
				}
			}
			.ipt{
				flex: 1;
				background-color: #E3DFDA!important;
				border-radius: 14rpx;
				font-size: 24rpx;
				color: black!important;
			}
		}
		.code{
			width: 100%;
			.btn{
				width: 100%;
				background-color: #354E44;
				color: #FFFFFF;
				font-size: 30rpx;
				letter-spacing: 2.14rpx;
				margin-bottom: 22rpx;
			}
			.detail{
				font-size: 24rpx;
				color: #A5A5A5;
				letter-spacing: 1.71rpx;
				text{
					font-size: 24rpx;
					color: #170000;
					letter-spacing: 1.71rpx;
					line-height: 33rpx;
				}
			}
		}
		.toGo{
			width: 100%;
			text-align: center;
			margin-top: 215rpx;
			font-size: 32rpx;
			color: #354E44;
			letter-spacing: 2.29rpx;
		}
	}
}
</style>
